<template>
  <div class="profile-wrapper">
    <div class="profile-header">
      <h1 class="page-title">个人中心</h1>
      <div class="header-actions" v-if="!isEditMode">
        <button @click="enterEditMode" class="btn btn-primary btn-small">编辑信息</button>
        <button @click="openChangePasswordDialog" class="btn btn-secondary btn-small">修改密码</button>
      </div>
    </div>
    
    <div class="profile-content">
      <!-- 用户信息卡片 -->
      <div class="profile-card user-card">
        <div class="card-header">
          <h2 class="card-title">基本信息</h2>
        </div>
        <div class="card-body">
          <div class="user-info-header">
            <div class="avatar-section">
              <div class="avatar-container">
                <img v-if="user.avatar" :src="user.avatar" :alt="user.nickname" class="avatar" @click="handleAvatarClick">
                <div v-else class="avatar-default" @click="handleAvatarClick">
                  {{ user.nickname ? user.nickname.charAt(0).toUpperCase() : user.username.charAt(0).toUpperCase() }}
                </div>
                <div class="avatar-overlay" @click="triggerFileInput" v-if="isEditMode">
                  <span class="edit-icon">📷</span>
                </div>
              </div>
              <input 
                ref="fileInput" 
                type="file" 
                accept="image/*" 
                @change="handleFileSelect" 
                class="file-input"
              >
            </div>
            <div class="user-basic-info">
              <h3 class="user-name">{{ user.nickname || user.username }}</h3>
              <p class="user-username">@{{ user.username }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细信息卡片 -->
      <div class="profile-card details-card">
        <div class="card-header">
          <h2 class="card-title">详细信息</h2>
        </div>
        <div class="card-body">
          <!-- 只读模式 -->
          <div v-if="!isEditMode" class="readonly-mode">
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">昵称</span>
                <span class="info-value">{{ user.nickname || '未设置' }}</span>
              </div>
              
              <div class="info-item">
                <span class="info-label">电话</span>
                <span class="info-value">{{ user.phone || '未设置' }}</span>
              </div>
              
              <div class="info-item">
                <span class="info-label">邮箱</span>
                <span class="info-value">{{ user.email || '未设置' }}</span>
              </div>
              
              <div class="info-item">
                <span class="info-label">驾龄</span>
                <span class="info-value">{{ user.driving_years ? user.driving_years + '年' : '未设置' }}</span>
              </div>
              
              <div class="info-item">
                <span class="info-label">城市</span>
                <span class="info-value">{{ user.city || '未设置' }}</span>
              </div>
              
              <div class="info-item">
                <span class="info-label">生日</span>
                <span class="info-value">{{ user.birthday || '未设置' }}</span>
              </div>
              
              <div class="info-item full-width">
                <span class="info-label">个人简介</span>
                <span class="info-value bio">{{ user.bio || '未设置' }}</span>
              </div>
            </div>
          </div>
          
          <!-- 编辑模式 -->
          <form v-else @submit.prevent="showSaveConfirm" class="profile-form">
            <div class="form-grid">
              <div class="form-group">
                <label for="nickname">昵称</label>
                <input 
                  type="text" 
                  id="nickname" 
                  v-model="form.nickname" 
                  class="form-control"
                  placeholder="请输入昵称"
                >
              </div>
              
              <div class="form-group">
                <label for="phone">电话</label>
                <input 
                  type="tel" 
                  id="phone" 
                  v-model="form.phone" 
                  class="form-control"
                  placeholder="请输入电话号码"
                  :class="{ 'is-invalid': errors.phone }"
                >
                <div v-if="errors.phone" class="invalid-feedback">{{ errors.phone }}</div>
              </div>
              
              <div class="form-group">
                <label for="email">邮箱</label>
                <input 
                  type="email" 
                  id="email" 
                  v-model="form.email" 
                  class="form-control"
                  placeholder="请输入邮箱"
                  :class="{ 'is-invalid': errors.email }"
                >
                <div v-if="errors.email" class="invalid-feedback">{{ errors.email }}</div>
              </div>
              
              <div class="form-group">
                <label for="driving_years">驾龄（年）</label>
                <input 
                  type="number" 
                  id="driving_years" 
                  v-model.number="form.driving_years" 
                  class="form-control"
                  min="0"
                  max="100"
                  placeholder="请输入驾龄"
                >
              </div>
              
              <div class="form-group">
                <label for="city">所在城市</label>
                <input 
                  type="text" 
                  id="city" 
                  v-model="form.city" 
                  class="form-control"
                  placeholder="请输入所在城市"
                >
              </div>
              
              <div class="form-group">
                <label for="birthday">生日</label>
                <input 
                  type="date" 
                  id="birthday" 
                  v-model="form.birthday" 
                  class="form-control"
                >
              </div>
              
              <div class="form-group full-width">
                <label for="bio">个人简介</label>
                <textarea 
                  id="bio" 
                  v-model="form.bio" 
                  class="form-control textarea"
                  rows="4"
                  placeholder="请输入个人简介"
                ></textarea>
              </div>
            </div>
            
            <div class="form-actions">
              <button type="button" @click="cancelEdit" class="btn btn-secondary btn-small">取消</button>
              <button type="submit" class="btn btn-primary btn-small">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 头像查看对话框 -->
    <div v-if="showAvatarDialog" class="dialog-overlay" @click="closeAvatarDialog">
      <div class="avatar-dialog" @click.stop>
        <div class="avatar-dialog-content">
          <img :src="user.avatar" :alt="user.nickname" class="avatar-large">
        </div>
        <div class="avatar-dialog-footer">
          <button @click="closeAvatarDialog" class="btn btn-secondary btn-small">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 保存确认对话框 -->
    <div v-if="showConfirmDialog" class="dialog-overlay" @click="closeConfirmDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>保存</h3>
        </div>
        <div class="dialog-body">
          <p>确定要保存修改的信息吗？</p>
        </div>
        <div class="dialog-footer">
          <button @click="closeConfirmDialog" class="btn btn-secondary btn-small">取消</button>
          <button @click="saveProfile" class="btn btn-primary btn-small">确认</button>
        </div>
      </div>
    </div>
    
    <!-- 修改密码对话框 -->
    <div v-if="showChangePasswordDialog" class="dialog-overlay" @click="closeChangePasswordDialog">
      <div class="password-dialog" @click.stop>
        <div class="dialog-header">
          <h3>修改密码</h3>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="handleChangePassword" class="password-form">
            <div class="form-group">
              <label for="currentPassword">原密码</label>
              <input 
                type="password" 
                id="currentPassword" 
                v-model="passwordForm.currentPassword" 
                class="form-control"
                placeholder="请输入原密码"
                :class="{ 'is-invalid': passwordErrors.currentPassword }"
              >
              <div v-if="passwordErrors.currentPassword" class="invalid-feedback">{{ passwordErrors.currentPassword }}</div>
            </div>
            
            <div class="form-group">
              <label for="newPassword">
                新密码
                <div class="label-tooltip">
                  <img 
                    src="/images/tip.png" 
                    alt="提示" 
                    class="tooltip-icon"
                    @mouseenter="showPasswordTooltip = true"
                    @mouseleave="showPasswordTooltip = false"
                  />
                  <div v-show="showPasswordTooltip" class="tooltip" :class="{ 'show': showPasswordTooltip }">
                    <div class="tooltip-content">
                      <p>密码格式要求：</p>
                      <ul>
                        <li>长度为6-18个字符</li>
                        <li>只能包含英文字母和数字</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </label>
              <input 
                type="password" 
                id="newPassword" 
                v-model="passwordForm.newPassword" 
                class="form-control"
                placeholder="请输入新密码"
                :class="{ 'is-invalid': passwordErrors.newPassword }"
              >
              <div v-if="passwordErrors.newPassword" class="invalid-feedback">{{ passwordErrors.newPassword }}</div>
            </div>
            
            <div class="form-group">
              <label for="confirmPassword">确认新密码</label>
              <input 
                type="password" 
                id="confirmPassword" 
                v-model="passwordForm.confirmPassword" 
                class="form-control"
                placeholder="请再次输入新密码"
                :class="{ 'is-invalid': passwordErrors.confirmPassword }"
              >
              <div v-if="passwordErrors.confirmPassword" class="invalid-feedback">{{ passwordErrors.confirmPassword }}</div>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button @click="closeChangePasswordDialog" class="btn btn-secondary btn-small">取消</button>
          <button @click="handleChangePassword" class="btn btn-primary btn-small" :disabled="isChangingPassword">
            {{ isChangingPassword ? '修改中...' : '修改' }}
          </button>
        </div>
      </div>
    </div>
    
    <div v-if="message" :class="['alert', message.type]">{{ message.text }}</div>
  </div>
</template>

<script>
import { authAPI } from '../api/auth.js'

export default {
  name: 'Profile',
  data() {
    return {
      user: {
        id: '',
        username: '',
        nickname: '',
        phone: '',
        email: '',
        driving_years: 0,
        city: '',
        birthday: '',
        bio: '',
        avatar: ''
      },
      form: {
        nickname: '',
        phone: '',
        email: '',
        driving_years: 0,
        city: '',
        birthday: '',
        bio: ''
      },
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      errors: {},
      passwordErrors: {},
      message: null,
      isEditMode: false,
      isChangingPassword: false,
      showConfirmDialog: false,
      showAvatarDialog: false,
      showChangePasswordDialog: false,
      showPasswordTooltip: false
    }
  },
  async created() {
    await this.loadUserProfile()
  },
  methods: {
    async loadUserProfile() {
      try {
        const response = await authAPI.getUserProfile()
        if (response.success) {
          this.user = response.user
          // 初始化表单数据
          this.form = { ...response.user }
        } else {
          this.showMessage(response.message, 'error')
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        this.showMessage('获取用户信息失败', 'error')
      }
    },
    
    enterEditMode() {
      this.isEditMode = true
      // 重置表单和错误信息
      this.form = { ...this.user }
      this.errors = {}
      this.message = null
    },
    
    showSaveConfirm() {
      // 清除之前的错误信息
      this.errors = {}
      
      // 验证表单
      if (!this.validateForm()) {
        return
      }
      
      this.showConfirmDialog = true
    },
    
    closeConfirmDialog() {
      this.showConfirmDialog = false
    },
    
    async saveProfile() {
      this.showConfirmDialog = false
      
      try {
        const response = await authAPI.updateUserProfile(this.form)
        if (response.success) {
          // 更新用户信息
          this.user = response.user
          this.isEditMode = false
          this.showMessage('个人信息更新成功', 'success')
          
          // 更新localStorage中的昵称
          if (response.user.nickname) {
            localStorage.setItem('nickname', response.user.nickname)
          } else {
            localStorage.removeItem('nickname')
          }
          
          // 发送事件通知App组件更新昵称
          window.dispatchEvent(new CustomEvent('nickname-updated', {
            detail: { nickname: response.user.nickname || response.user.username }
          }))
        } else {
          // 处理特定的错误信息
          if (response.message.includes('电话')) {
            this.errors.phone = response.message
          } else if (response.message.includes('邮箱')) {
            this.errors.email = response.message
          } else {
            this.showMessage(response.message, 'error')
          }
        }
      } catch (error) {
        console.error('更新用户信息失败:', error)
        this.showMessage('更新用户信息失败', 'error')
      }
    },
    
    cancelEdit() {
      this.isEditMode = false
      // 恢复到原始数据
      this.form = { ...this.user }
      this.errors = {}
      this.message = null
    },
    
    validateForm() {
      // 前端只做基本非空验证，具体业务验证由后端处理
      let isValid = true
      
      // 清除之前的错误信息
      this.errors = {}
      
      // 基本非空验证（可选字段不验证）
      if (this.form.phone && this.form.phone.trim() === '') {
        this.errors.phone = '电话号码不能为空'
        isValid = false
      }
      
      if (this.form.email && this.form.email.trim() === '') {
        this.errors.email = '邮箱不能为空'
        isValid = false
      }
      
      return isValid
    },
    
    showMessage(text, type) {
      this.message = { text, type }
      // 3秒后自动清除消息
      setTimeout(() => {
        this.message = null
      }, 3000)
    },
    
    // 触发文件选择
    triggerFileInput() {
      this.$refs.fileInput.click()
    },
    
    // 处理文件选择
    async handleFileSelect(event) {
      const file = event.target.files[0]
      if (!file) return
      
      // 验证文件类型
      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp']
      if (!allowedTypes.includes(file.type)) {
        this.showMessage('请选择有效的图片文件（JPG、PNG、GIF、BMP、WebP）', 'error')
        return
      }
      
      // 验证文件大小（5MB限制）
      if (file.size > 5 * 1024 * 1024) {
        this.showMessage('文件大小不能超过5MB', 'error')
        return
      }
      
      try {
        // 上传头像
        const response = await authAPI.uploadAvatar(file)
        if (response.success) {
          // 更新用户头像
          this.user.avatar = response.avatar_url
          this.showMessage('头像上传成功', 'success')
          
          // 如果当前在编辑模式，也需要更新表单中的头像
          if (this.isEditMode) {
            this.form.avatar = response.avatar_url
          }
        } else {
          this.showMessage(response.message, 'error')
        }
      } catch (error) {
        console.error('上传头像失败:', error)
        this.showMessage('上传头像失败', 'error')
      }
      
      // 清空文件输入框
      event.target.value = ''
    },
    
    // 处理头像点击事件
    handleAvatarClick() {
      // 只有在非编辑模式下点击头像才查看原图
      if (!this.isEditMode && this.user.avatar) {
        this.showAvatarDialog = true
      }
    },
    
    // 关闭头像查看对话框
    closeAvatarDialog() {
      this.showAvatarDialog = false
    },
    
    // 显示修改密码对话框
    openChangePasswordDialog() {
      this.showChangePasswordDialog = true
      this.resetPasswordForm()
    },
    
    // 关闭修改密码对话框
    closeChangePasswordDialog() {
      this.showChangePasswordDialog = false
      this.resetPasswordForm()
    },
    
    // 重置密码表单
    resetPasswordForm() {
      this.passwordForm = {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
      this.passwordErrors = {}
      this.isChangingPassword = false
    },
    
    // 验证密码表单
    validatePasswordForm() {
      this.passwordErrors = {}
      let isValid = true
      
      // 前端只做基本非空验证，具体业务验证由后端处理
      if (!this.passwordForm.currentPassword) {
        this.passwordErrors.currentPassword = '请输入原密码'
        isValid = false
      }
      
      if (!this.passwordForm.newPassword) {
        this.passwordErrors.newPassword = '请输入新密码'
        isValid = false
      }
      
      if (!this.passwordForm.confirmPassword) {
        this.passwordErrors.confirmPassword = '请确认新密码'
        isValid = false
      }
      
      return isValid
    },
    
    // 处理密码修改
    async handleChangePassword() {
      if (!this.validatePasswordForm()) {
        return
      }
      
      this.isChangingPassword = true
      
      try {
        const response = await authAPI.changePassword({
          currentPassword: this.passwordForm.currentPassword,
          newPassword: this.passwordForm.newPassword
        })
        
        if (response.success) {
          this.showMessage('密码修改成功', 'success')
          this.closeChangePasswordDialog()
        } else {
          // 处理特定的错误信息
          if (response.message.includes('原密码')) {
            this.passwordErrors.currentPassword = response.message
          } else {
            this.showMessage(response.message, 'error')
          }
        }
      } catch (error) {
        console.error('修改密码失败:', error)
        this.showMessage('修改密码失败，请稍后重试', 'error')
      } finally {
        this.isChangingPassword = false
      }
    }
  }
}
</script>

<style scoped>
.profile-wrapper {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.page-title {
  color: #4CAF50;
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* 卡片样式 */
.profile-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
}

.profile-card:hover {
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.25);
  transform: translateY(-2px);
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.card-title {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
}

.card-body {
  padding: 1.5rem;
}

/* 用户信息头部 */
.user-info-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.avatar-section {
  position: relative;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.avatar-container:hover .avatar-overlay {
  display: flex;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #4CAF50;
}

.avatar-default {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50, #81C784);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  border: 3px solid #4CAF50;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.file-input {
  display: none;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.75rem;
  font-weight: 600;
}

.user-username {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

/* 信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.info-grid .full-width {
  grid-column: 1 / -1;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.info-value {
  color: #666;
  font-size: 1rem;
  padding: 0.75rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
  user-select: none;
  transition: all 0.2s ease;
}

.info-value:hover {
  background-color: #f0f0f0;
  border-color: #ddd;
}

.info-value.bio {
  white-space: pre-wrap;
  min-height: 80px;
}

/* 表单网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}

.form-control {
  padding: 0.9rem 1.1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

.form-control:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.form-control.textarea {
  resize: vertical;
  min-height: 120px;
}

.is-invalid {
  border-color: #f44336;
}

.invalid-feedback {
  color: #f44336;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}

.invalid-feedback::before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #f44336;
  color: white;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid #eee;
}

/* 按钮样式 - 紧凑精致 */
.btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 5px;
}

.btn-primary {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #43A047, #57BB8A);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  margin-top: 1.5rem;
  animation: slideIn 0.3s ease;
}

.alert.success {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  box-shadow: 0 4px 8px rgba(46, 125, 50, 0.1);
}

.alert.error {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
  border: 1px solid #ef9a9a;
  box-shadow: 0 4px 8px rgba(198, 40, 40, 0.1);
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: dialogAppear 0.3s ease;
}

.dialog-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
}

.dialog-body {
  padding: 1.5rem;
}

.dialog-body p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

.dialog-footer {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  border-top: 1px solid #eee;
}

/* 头像查看对话框样式 */
.avatar-dialog {
  background: white;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  animation: dialogAppear 0.3s ease;
}

.avatar-dialog-content {
  padding: 2rem;
  text-align: center;
}

.avatar-large {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  object-fit: contain;
  border: 3px solid #4CAF50;
}

.avatar-dialog-footer {
  padding: 1rem 2rem 2rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  border-top: 1px solid #f0f0f0;
}

/* 修改密码对话框样式 */
.password-dialog {
  background: white;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 90%;
  animation: dialogAppear 0.3s ease;
  overflow: hidden;
}

.password-form {
  padding: 1.5rem;
}

.password-form .form-group {
  margin-bottom: 1.5rem;
}

.password-form .form-group label {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
  color: #444;
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
}

.password-form .form-control {
  padding: 0.9rem 1.1rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
}

.password-form .form-control:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.password-form .form-control::placeholder {
  color: #bfbfbf;
  font-size: 0.95rem;
}

.password-form .is-invalid {
  border-color: #f5222d;
  box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.15);
}

.password-form .invalid-feedback {
  color: #f5222d;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  padding-left: 0.1rem;
}

.password-form .invalid-feedback::before {
  content: "!";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #f5222d;
  color: white;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  line-height: 14px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* 密码提示样式 */
.label-tooltip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  position: relative;
  cursor: pointer;
}

.tooltip-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tooltip-icon:hover {
  opacity: 1;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  color: white;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  width: 240px;
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  margin-top: 8px;
  transform: translateY(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.tooltip.show {
  transform: translateY(5px);
  opacity: 1;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}

.tooltip-content p {
  margin: 0 0 5px 0;
  font-weight: bold;
}

.tooltip-content ul {
  margin: 0;
  padding-left: 15px;
}

.tooltip-content li {
  margin: 3px 0;
}

/* 对话框动画 */
@keyframes dialogAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-wrapper {
    padding: 1rem;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .page-title {
    font-size: 1.75rem;
  }
  
  .profile-card {
    border-radius: 10px;
  }
  
  .card-header {
    padding: 1.25rem;
  }
  
  .card-body {
    padding: 1.25rem;
  }
  
  .user-info-header {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-container {
    width: 80px;
    height: 80px;
  }
  
  .avatar {
    border-width: 2px;
  }
  
  .avatar-default {
    border-width: 2px;
    font-size: 2rem;
  }
  
  .user-name {
    font-size: 1.5rem;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
  }
  
  .avatar-dialog {
    max-width: 95%;
  }
  
  .avatar-large {
    max-height: 60vh;
  }
  
  .dialog {
    max-width: 90%;
  }
  
  .password-dialog {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .profile-wrapper {
    padding: 0.75rem;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .card-header {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .avatar-container {
    width: 70px;
    height: 70px;
  }
  
  .avatar-default {
    font-size: 1.75rem;
  }
  
  .user-name {
    font-size: 1.25rem;
  }
  
  .user-username {
    font-size: 0.9rem;
  }
  
  .info-label {
    font-size: 0.9rem;
  }
  
  .info-value {
    font-size: 0.95rem;
    padding: 0.6rem;
  }
  
  .form-control {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  .btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .alert {
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
  }
}
</style>